/**
 * 质量安全通告详情
 */
<template>
    <el-form v-loading="loading" :model="formData" :rules="currentFormRules" ref="formRef" label-width="120px" :scroll-to-error="true">
        <vp-card>
            <template #header>
                <vp-label zh="基本信息" en="Basic Info" />
            </template>
            <el-row>
                <vp-col :span="4" v-if="type !== 'add'">
                    <el-form-item prop="bh">
                        <template #label><vp-label zh="记录单号" en="No." /></template>
                        <el-input v-model="formData.bh" v-if="isEditPage" v-trim disabled>
                        </el-input>
                        <span v-else>{{ formData.bh }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="gglx">
                        <template #label><vp-label zh="通知类型" en="Notice Type" /></template>
                        <el-select class="w100" v-model="formData.gglx" v-if="isEditPage" clearable>
                            <el-option v-for="noticeType in noticeTypes" :value="noticeType.bh" :label="noticeType.lxZh + ' ' + noticeType.lxEn">
                            </el-option>
                        </el-select>
                        <span v-else>{{ noticeTypeDesc }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="2">
                    <el-form-item prop="ggbt">
                        <template #label><vp-label zh="标题" en="Title"/></template>
                        <el-input 
                            type="textarea" 
                            v-model="formData.ggbt" 
                            maxlength="1000" 
                            :autosize="{ minRows: 1}"
                            v-if="isEditPage"
                        >
                        </el-input>
                        <span v-else>{{ formData.ggbt }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="2">
                    <el-form-item prop="ryxm">
                        <template #label><vp-label zh="分发" en="Distribution"/></template>
                        <el-input 
                            v-model="ryxm" 
                            readonly
                            v-if="isEditPage"
                        >
                            <template #append>
                                <el-button @click="handleChoosePersons">
                                    <SvgIcon name="ele-Search" />
                                </el-button>
                            </template>
                        </el-input>
                        <span v-else >{{ ryxm }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="2">
                    <el-form-item prop="xxgs">
                        <template #label><vp-label zh="信息概述" en="Instruction"/></template>
                        <el-input 
                            type="textarea" 
                            v-model="formData.xxgs" 
                            maxlength="1000" 
                            :autosize="{ minRows: 4}"
                            v-if="isEditPage"
                        >
                        </el-input>
                        <span v-else >{{ formData.xxgs }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="2">
                    <el-form-item prop="bz">
                        <template #label><vp-label zh="其他备注" en="Remark"/></template>
                        <el-input 
                            type="textarea" 
                            v-model="formData.bz" 
                            maxlength="1000" 
                            :autosize="{ minRows: 4}"
                            v-if="isEditPage"
                        >
                        </el-input>
                        <span v-else >{{ formData.bz }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                
            </el-row>
            <VpFileListRow 
                :attachmentList="formData.attachments" 
                @attachmentListEmit="formData.attachments = $event" 
                :readOnly="!isEditPage"
            >
            </VpFileListRow>
        </vp-card>

        <!--用户选择页面-->
      <VpUserDialog ref="userDialogRef"></VpUserDialog>
    </el-form>
</template>
<script setup lang="ts" name="safetyNotice">
import { ref, defineAsyncComponent, computed, onMounted } from 'vue';
import validateUtils from '/@/utils/validateUtils';
import VpFileListRow from '/@/components/vp/file/VpFileListRow.vue';
import request from '/@/utils/request';

const VpUserDialog = defineAsyncComponent(() => import('/@/components/vp/user/VpUserDialog.vue'));

const emits = defineEmits(['formSubmited']);
const props = defineProps({
    // 页面类型
	type: {
		type: String,
		default: 'add',
	},
	// 加载状态
	loading: {
		type: Boolean,
		default: false,
	},
	// 开启验证
	enableValid: {
		type: Boolean,
		default: true,
	},
});
const formData = ref({
    id:"",
    zt:10,
    bh:"",
    gglx:"",
    ggbt:"",
    xxgs:"",
    bz:"",
    fbrid: "",
    fbrxm: "",
    fbsj: "",
    fjglid: "",
    attachments: [] as any[],
    persons: [] as any[],
});
const formRules = {
    gglx:[ validateUtils.notNull ],
    ggbt:[ validateUtils.notNull ],
}

// 页面验证规则
const currentFormRules = computed(() => {
    if (!props.enableValid) {
        return {};
    }
    if (isEditPage.value) {
        return formRules;
    }
    return {};
})

const formRef = ref();

// 是否是编辑页面
const isEditPage = computed(() => {
    return props.type === 'add' || props.type === 'edit';
});

onMounted(() => {
	loadNoticeTypes();
})

// 加载通告类型
const noticeTypes = ref([] as any[]);
const loadNoticeTypes = () => {
    request.get('/basicData/customItem/list', {
        params: {
            items: 'QUALITY_SAFETY_NOTICE_TYPE',
        }
    }).then((res) => {
        if (res.data && res.data.length > 0) {
            const sznr = res.data[0].sznr;
			noticeTypes.value = JSON.parse(sznr) || [];
        }
    })
}

// 清空数据
const initFormData = ()=>{
    formData.value = {
        id:"",
        zt:10,
        bh:"",
        gglx:"",
        ggbt:"",
        xxgs:"",
        bz:"",
        fbrid: "",
        fbrxm: "",
        fbsj: "",
        fjglid: "",
        attachments: [] as any[],
        persons: [] as any[],
    }
}

// 回显数据
const setData = (data: any) => {
    initFormData();
    formData.value = {
        ...formData.value,
        ...data,
    };
}

/**
 * 获取数据
 */
const getData = (): Promise<any>=>{
    return new Promise((resolve, reject) => {
        formRef.value.validate((valid: boolean) => {
            const data = {
                ...formData.value,
            };
            if (valid) {
                resolve(data);
            } else {
                reject();
            }
        })
    })
}

//用户选择
const userDialogRef = ref();
const handleChoosePersons = () => {
    userDialogRef.value.handleOpen({
        type: 1, // 1、选择人员t_user 2、选择档案b_p3_001
        multi: true,    // 是否多选
        selected: (formData.value.persons || []).map((obj: any) => { return obj.ryid }), // 默认选中人员id
        callback: (data: any) => {
            formData.value.persons = data.map((row: any) => {
                return {
                    ryid: row.yhid,
                    ryxm: row.xm
                };
            });
        }
    });
}

// 人员姓名
const ryxm = computed(() => {
    return formData.value.persons.map((row: any) => {
        return row.ryxm;
    }).join(",");
});

// 公告类型说明
const noticeTypeDesc = computed(() => {
    const noticeType = (noticeTypes.value || []).find((noticeType: any) => {
        return noticeType.bh === formData.value.gglx;
    });
    return noticeType ? noticeType.lxZh + ' ' + noticeType.lxEn : '';
});

defineExpose({
    setData,
    getData,
})

</script>
<style scoped lang="scss">
</style>